<link rel="stylesheet" href="../src/css/pages/imageManage.css">
<!-- <section>
    <ol class="breadcrumb">
        <li>{{i18n-resouceManager}}</li>
        <li class="active">{{i18n-imageManager}}</li>
    </ol>
</section> -->
<section id="msg_placeholder"></section>
<div class="container-fluid image-manage-container">
    <section id="widget-grid">
        <div class="content" id="adimage-manager-page">
            <!-- row -->
            <div class="row">
                <article class="col-sm-12">
                    <div class="jarviswidget jarviswidget-sortable">
                        <!-- widget div-->
                        <div class="content-container" role="content">
                            <!-- widget content -->
                            <div class="widget-body">
                                <div class="row" style="margin-bottom: 30px;">
                                    <div class="col-sm-9">
                                        <button type="button" class="btn btn-primary btn-sm btn-top" id="btn-upload"><strong>{{i18n-uploadImage}}</strong></button>
                                        <button type="button" class="btn btn-primary btn-sm btn-top btn-create-ad disabled create-ad" id="btn-create"><strong>{{i18n-createAd}}</strong></button>
                                    </div>
                                </div>
                                <div class="filter-area">
                                    <div class="form-group col-sm-12" style="margin-top: 15px;">
                                        <label class="row-label col-sm-1" style="margin-right: -22px;">{{i18n-searchTags}}:</label>
                                        <div class="col-sm-2" style="margin-right: -10px;">
                                            <select id="image-owner-select" style="width:100%">
                                                <option value="true">{{i18n-myImage}}</option>
                                                <option value="false">{{i18n-otherImage}}</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2" style="margin-right: -10px;">
                                            <select id="image-type-select" style="width:100%">
                                                <option value="IMAGE">{{i18n-one2manyImage}}</option>
                                                <option value="CAROUSEL">{{i18n-one2oneImage}}</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <select id="app-select" style="width:100%"></select>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-12" id="stats-app-filter">
                                        <label class="row-label col-sm-1" style="margin-right: -22px;">{{i18n-filterApp}}:</label>
                                        <div class="col-sm-4">
                                            <select id="app-select-stats" style="width:90%"></select>
                                            <a href="javascript:void(0)" title="{{i18n-appFilterDesc}}" data-toggle="tooltip" data-placement="right"><i class="glyphicon glyphicon-question-sign" style="margin-left: 5px;margin-top: 10px;"></i></a>
                                        </div>
                                        <button type="button" class="pull-right btn-primary btn-sm btn-query" id="query-btn">{{i18n-searchBtn}}</button>
                                    </div>
                                </div>
                                <div class="" style=" width: 100%;display: inline-block;padding-right:20px;min-height:40px;">
                                    <div class="create-info pull-left create-ad" style="margin-top:15px;">
                                        {{i18n-selectedDesc}} <span class="image-count">0</span> {{i18n-selectedNums}}
                                        <a id="create-image-show" class="disabled btn btn-link" style="padding-left: 10px;"><strong>{{i18n-viewImage}} </strong></a>
                                    </div>
                                    <div class="pull-right cycle-area" id="cycle-area">
                                        <div class="title">
                                            {{i18n-statisticsCycle}}
                                        </div>
                                        <div class="">
                                            <select id="image-date-select" style="width:90px">
                                                <option value="1">{{i18n-Last1days}} </option>
                                                <option value="2" selected="selected">{{i18n-Last2days}} </option>
                                                <option value="3">{{i18n-Last3days}} </option>
                                                <option value="7">{{i18n-Last7days}} </option>
                                                <option value="15">{{i18n-Last15days}} </option>
                                                <option value="30">{{i18n-Last30days}} </option>
                                            </select>
                                        </div>
                                        <div class="">
                                            <div class="checkbox" style="padding-left: 20px;">
                                                <label>
                                                    <input type="checkbox" class="checkbox style-0" id="image-isNew-checkbox">
                                                    <span>{{i18n-onlyShowNewAd}} </span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="detail-area">
                                            <div class="title" style="padding-left: 20px;color:#a1a1a1;"><strong>|</strong>
                                            </div>
                                            <div class="title" style="padding-left: 20px;">
                                                {{i18n-Breakdown}}
                                            </div>
                                            <div class="">
                                                <select id="image-breakdowns-select" style="width:65px">
                                                    <!--<option value="" selected="selected">请选择数据细分类别</option>-->
                                                    <option value="gender">{{i18n-gender}} </option>
                                                    <option value="country">{{i18n-country}} </option>
                                                    <!-- <option value="age,gender" >性别和年龄</option> -->
                                                    <!-- <option value="age">年龄</option> -->
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="listArea">
                                    <!--图片展示区 -->
                                    <div id="adimage-row">
                                        <table class="dataTable no-footer" list-manager="adimage-list">
                                            <thead>
                                                <!-- 复选框 -->
                                                <th class="create-ad" th-name="order">
                                                    <div class="checkbox">
                                                        <label>
                                                            <input type="checkbox" class="checkbox all" name="create"><span></span>
                                                        </label>
                                                    </div>
                                                </th>
                                                <th th-name="pic">{{i18n-image}} </th>
                                                <th th-name="createTime" sorting="down">{{i18n-createTime}} </th>
                                                <th th-name="spent" sorting>{{i18n-spent}} </th>
                                                <th th-name="ctr" sorting>{{i18n-ctr}} </th>
                                                <th th-name="cr" sorting>{{i18n-cr}} </th>
                                                <th th-name="results" sorting>{{i18n-results}} </th>
                                                <th th-name="cost" sorting>{{i18n-cost}} </th>
                                                <th th-name="uniqueImpressions" sorting>{{i18n-uniqueImpressions}} </th>
                                                <th th-name="uploadUserName">{{i18n-uploadUserName}} </th>
                                                <th th-name="adCount" remind="{{i18n-adCountDesc}}"> {{i18n-adCount}} </th>
                                                <th data-operation th-name="operation">{{i18n-operation}} </th>
                                            </thead>
                                            <tbody id="adimage-list">
                                            </tbody>
                                        </table>
                                    </div>
                                    <!--图片展示区 -->
                                    <!--轮播展示区 -->
                                    <div id="carousel-row">
                                        <div id="carousel-list"></div>
                                        <div class="col-sm-12 text-right">
                                            <div class="dt-toolbar-footer">
                                                <ul class="pagination pagination-sm" id="carousel-pagination"></ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!--轮播展示区 -->
                                </div>
                            </div>
                            <!-- end widget content -->
                        </div>
                        <!-- end widget div -->
                    </div>
                </article>
            </div>
        </div>
    </section>
</div>
<!-- 上传图片 modal -->
<div id="upload-adimage-modal" class="modal fade no-picture-upload" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{i18n-uploadImage}} </h4>
            </div>
            <div class="modal-body">
                <div class="modal-alert" style="display: block;border: 0;background:transparent;text-align: left;padding-left: 20px;  padding-top: 5px;"></div>
                <div class="container container-content create-ad-select">
                    <div class="row">
                        <div class="col-sm-12" id="upload-area">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-1 text-right" style="padding-right:0px;">
                        <h6>{{i18n-upload2app}}
                            <span class="red">*</span>
                        </h6>
                    </div>
                    <div class="col-md-4">
                        <select id="app-select-modal" style="width: 100%" class="form-control"></select>
                    </div>
                    <div class="col-md-7">
                        <button type="button" class="btn btn-default hide" id="modal-btn-preview">{{i18n-previewBtn}} </button>
                        <button type="button" class="btn btn-default hide" id="cancel-btn" data-dismiss="modal">{{i18n-finishBtn}} </button>
                        <button type="button" class="btn btn-primary" id="modal-btn-upload">{{i18n-uploadBtn}} </button>
                        <button type="button" class="btn btn-default hide" id="btn-next-step">{{i18n-nextTagBtn}} </button>
                        <button type="button" class="btn btn-default hide" data-dismiss="modal"> {{i18n-closeBtn}}</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /上传图片 modal -->
<div class="hide">
    <div id="commentDlg" class="form-horizontal" title=" {{i18n-comment}}">
        <div class="well">
            <section class="">
                <div id="comment-history" class="chat-body custom-scroll" style="height:250px;overflow-y: auto;">
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 创建广告查看图片 modal -->
<div id="create-adimage-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-slg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="create-adimage-modal-title">{{i18n-selectedImageDesc}} </h4>
            </div>
            <div class="modal-body show-image-modal-body">
                <div class="show-image-container" style="background-color: white;max-height: 550px;overflow-y: auto;">
                    <table class="table nowrap-ellipsis table-striped table-bordered table-hover dataTable no-footer" list-manager="create-adimage-list">
                        <thead>
                            <!-- 复选框 -->
                            <th width="50px" th-name="order">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" class="checkbox all" name="create"><span></span>
                                    </label>
                                </div>
                            </th>
                            <th width="140px" th-name="pic">{{i18n-image}} </th>
                            <th th-name="createTime" sorting="down">{{i18n-createTime}} </th>
                            <th th-name="spent" sorting>{{i18n-spent}} </th>
                            <th th-name="ctr" sorting>{{i18n-ctr}} </th>
                            <th th-name="cr" sorting>{{i18n-cr}} </th>
                            <th th-name="results" sorting>{{i18n-results}} </th>
                            <th th-name="cost" sorting>{{i18n-cost}} </th>
                            <th th-name="uniqueImpressions" sorting>{{i18n-uniqueImpressions}} </th>
                            <th th-name="uploadUserName">{{i18n-uploadUserName}} </th>
                            <th th-name="adCount">{{i18n-adCount}} </th>
                            <tbody id="select-adimage-list">
                            </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button id="show-image-btn" type="button" class="btn modal-btn">{{i18n-okBtn}} </button>
                <button type="button" class="btn modal-btn modal-btn-cancel" data-dismiss="modal"> {{i18n-cancelBtn}} </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div id="create-ad-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">{{i18n-createAdDesc}} </h4>
            </div>
            <div class="modal-body">
                <div class="container container-content">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3 control-label" style="text-align:left;">{{i18n-app}} </label>
                            <div class="col-md-8" id="app-area">
                                <select style="width:100%" id="applist"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" style="text-align:left;">{{i18n-platform}} </label>
                            <div class="col-md-8" id="platform-area">
                                <select style="width:100%" id="platformlist"></select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="create-ad" type="button" class="btn modal-btn">{{i18n-okBtn}}</button>
                <button type="button" class="btn modal-btn modal-btn-cancel" data-dismiss="modal">{{i18n-cancelBtn}} </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 轮播图展示区 模板 -->
<script type="text/x-template" id="t-carousel-row">
    <div class="row">
        <% _.each(resources,function (res,i) { %>
            <% var placement = ((i+1)%6==0)?'left':'top'; %>
                <div class="col-md-2" style="width: 19.66666667%;">
                    <div class="thumbnail-div" data-mid="<%=res.mongodbId%>" slider-type="carousel">
                        <img src="<%=res.litImgURL%>" data-img="<%=res.visitPath%>" class="superbox-img">
                        <h5 class="text-center" title="<%=res.title%>">
                    <span class="image-status" style="display:block; font-size: 12px;margin-bottom:5px;text-align:left;color:#666;">
                        {{i18n-imageStatus}} <%=res.statusText%>
                    </span>
                    <small style="display:block; text-align:right;">
                        <%=res.title%>
                    </small>
                </h5>
                    </div>
                </div>
                <% if((i+1)%5==0){ %>
    </div>
    <div class="row">
        <% } %>
            <% }) %>
    </div>
</script>
<!-- 编辑图片信息 modal -->
<div id="open-adimage-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content" style="background-color: #fff">
            <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute;right:5px;z-index: 999;">
                <span aria-hidden="true">&times;</span>
            </a>
            <div class="modal-body" style="overflow: hidden;    padding: 0 10px 0 0;height: 700px;">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /编辑图片信息 modal -->
<!-- #adimage-modal 图片modal中body 模板 -->
<script type="text/x-template" id="t-adimage-modal-body">
    <div class="" data-mid="<%=img.mongodbId%>" style="width:100%;height:100%">
        <div class="img-left" style="float:left;width:710px;max-width:710px;background:#363636;height:100%;">
            <img class="img-responsive" src="<%=img.visitPath%>" title="<%=img.name%>" alt="<%=img.name%>" data-img="<%=img.visitPath%>">
        </div>
        <div class="img-right" style="float:right;width:270px;">
            <form class="form-horizontal">
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-12 control-label text-left">
                            <%=img.name%>
                        </label>
                        <label class="col-md-12 control-label text-left"></label>
                    </div>
                    <hr/>
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="width:54px"> {{i18n-app}} </label>
                        <div class="col-md-9">
                            <select multiple="multiple" class="form-group-select2 app-select2" data-mid="<%=img.mongodbId%>" style="width:100%" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="width:54px"> {{i18n-language}} </label>
                        <div class="col-md-9">
                            <select multiple="multiple" class="form-group-select2 language-select2" data-mid="<%=img.mongodbId%>" style="width:100%" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" style="width:54px"> {{i18n-grander}} </label>
                        <div class="col-md-9">
                            <select class="form-group-select2 sex-select2" data-mid="<%=img.mongodbId%>" style="width:100%">
                                <option value=""> {{i18n-all}} </option>
                                <option value="1"> {{i18n-male}}</option>
                                <option value="2"> {{i18n-famale}}</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</script>
<!-- 图片详情模板 -->
<script type="text/x-template" id="t-edit-image-counties-content">
    <div class="smart-form">
        <section>
            <button type="button" class="close" data-dismiss="popover" aria-label="Close" style=" margin-top: -15px;">
                <span aria-hidden="true">&times;</span>
            </button>
        </section>
        <% _.each(appCountries,function (countries,i) { %>
            <section>
                <label class="checkbox">
                    <input type="checkbox" class="checkbox-item" name="checkbox-all" value="1" <%=countries.checked%>>
                    <i></i>
                    <strong>
                    <%=countries.connectionObjectName%>
                </strong>
                </label>
                <div class="inline-group" style="margin-left: 25px">
                    <% _.each(countries.countries,function (country,j) { %>
                        <label class="checkbox">
                            <input type="checkbox" class="checkbox-item" name="checkbox-inline" value="<%=country.name%>" <%=country.checked%>>
                            <i></i>
                            <%=country.name%>
                        </label>
                        <% }) %>
                </div>
            </section>
            <% }) %>
    </div>
</script>
<div id="popover-from" class="hide" data-from="model"></div>
<!-- 上传窗口中input的title -->
<script type="text/x-template" id="t-modal-input-title">
    <div tabindex="500" class="form-control file-caption  kv-fileinput-caption">
        <div class="file-caption-name" title="<%=title%>">
            <span class="glyphicon glyphicon-file kv-caption-icon"></span>
            <%=title%>
        </div>
    </div>
</script>
<div class="hide">
    <div id="commonDlg"></div>
</div>
<div class="modal fade" id="delete-image-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"> {{i18n-deleteImage}} </h4>
            </div>
            <div class="modal-body">
                <p> {{i18n-DoUsureDelete}} </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancelBtn}} </button>
                <button type="button" class="btn btn-primary"> {{i18n-okBtn}}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="examine-image-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-auditPhotos}}</h4>
            </div>
            <div class="modal-body">
                <p>{{i18n-doUpassed}} </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancelBtn}} </button>
                <button type="button" class="btn btn-primary">{{i18n-okBtn}}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="comment-image-modal">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{i18n-commonet}}</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancelBtn}}</button>
                <button type="button" class="btn btn-primary">{{i18n-okBtn}}</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
